<script setup lang="ts">
  import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
  import Account from './Account.vue'
  import General from './General.vue'
  import Recording from './Recording.vue'
  import About from './About.vue'

  // 设置选项卡
  const tabs = [
    { id: 'account', name: '账号' },
    { id: 'general', name: '常规' },
    { id: 'recording', name: '录制' },
    { id: 'about', name: '关于' }
  ]
</script>

<template>
  <div class="settings-container p-6 flex flex-col h-full">
    <TabsRoot class="flex flex-col h-full w-full" default-value="account">
      <TabsList class="flex shrink-0 relative">
        <TabsIndicator
          class="rounded-full h-[2px] w-[--reka-tabs-indicator-size] translate-x-[--reka-tabs-indicator-position] translate-y-[1px] transition-[width,transform] duration-300 bottom-0 left-0 absolute"
        >
          <div class="bg-indigo-400 h-full w-full" />
        </TabsIndicator>
        <TabsTrigger
          v-for="tab in tabs"
          :key="tab.id"
          :value="tab.id"
          class="outline-none text-sm leading-none flex h-[30px] w-14 cursor-default select-none items-center justify-center data-[state=active]:text-indigo-400 focus-visible:shadow-[0_0_0_2px] focus-visible:shadow-black focus-visible:relative"
        >
          {{ tab.name }}
        </TabsTrigger>
      </TabsList>

      <TabsContent value="account" class="h-full">
        <Account />
      </TabsContent>

      <TabsContent value="general" class="h-full">
        <General />
      </TabsContent>

      <TabsContent value="recording" class="h-full">
        <Recording />
      </TabsContent>

      <TabsContent value="about" class="h-full">
        <About />
      </TabsContent>
    </TabsRoot>
  </div>
</template>
